Casi todos tenemos el enlace a Twitter en nuestra sidebar, pero hay otra forma de añadirlo para que siempre esté visible, la idea es la misma de la imagen fija al final del blog. En esa imagen añadimos el efecto deslizante porque se trataba de un efecto pero al tratarse de un simple enlace la podemos añadir sin efecto fijándola en un punto en concreto.
En un gadget de HTML añadimos:
<div id="twitterfijo">
<a style="display:scroll;position:fixed;bottom:345px;right:0px;" href="url-twitter">
<img src="url-imagen"/></a>
</div>
Si en lugar de añadirlo en un gadget preferimos añadirlo a la plantilla, podemos hacerlo justo antes de:
<div id='main-wrapper'>
La altura la escogemos en bottom:345px y la anchura right:0px
Hay que intentar que la imagen quede pegada al blog y no sobre el blog, de lo contrario es posible que se "esconda" detrás de algún bloque que tengamos añadido.
Puede verse funcionando en este ejemplo.
Se puede añadir cualquier otra imagen y enlazar cualquier otro sitio que no sea Twitter.
En Todo Twitter podéis encontrar gran surtido de iconos y lo último en herramientas y utilidades para Twitter.
Hola Gema! Yo con mi blog no sé qué pasaba que lo probé pero al bajar la página el icono se deslizaba también. Total, que cambié "position:fixed" por "position:absolute" y "bottom" por "top" y ha quedado de maravilla! :)
Gracias de nuevo por estos "truquitos" tan geniales!
yz Hola Jenny, con el posicionamiento fixed conseguimos que la imagen quede fija con respecto a alguna referencia de la pantalla.
La única diferencia entre fixed y absolute es que la posición respecto del bloque de contención es establecido por el acceso visual.
Te quedó genial :D
Hola gema es la primera vez que entro a tu blog y la verdad me parecio muy interesante el efecto del followme flotante, bueno yo lo coloque pegado a mi sidebar y la verdad me gusto mucho como se ve, para ser la primera vez que entro aqui me has dejado con una buena imprecion, y eso que he llegado de vagabundia, jajaja.
Att: El Lagarto.
Gracias Gema! Eso sí, el blog lo tengo como lo tengo gracias a todos tus tutoriales para poner cositas, eres de grandísima ayuda, de verdad. Además me encanta que siempre pongas cositas nuevas para seguir optimizando el blog. No lo cierres nunca! Muchos besos!
yz jajajaja Lagarto.
Y eso que vienes de Vagabundia, esto a su lado es un patio de recreo la clase didáctica está allá :D
yz Intentaremos no cerrarlo Jenny :)
Muy bueno el truco, tras varios días queriendo averiguar cómo se hacía y lo descubro en este maravilloso blog. Muchas gracias y un saludo Gema.
yz Saludos Toni, gracias por comentar :D
Hola gema...totalmente esto queria..me encanto!!! Ya puse el de mi twitter..pero pregunto se puede agregar x ej 1 imagen mas de x ej facebook y q salgan las 2 fijas..? y como seria el codigo? xq yo de metida no mas intente manipularlo a ver si salia pero no me salio nada jaja..XD
Mil Gracias!
:: El código es igual Nessa únicamente cambia la altura, es decir si añades bottom:345px;right:0px; para Twitter a otro le añades bottom:365px;right:0px;
El valor right:0px siempre a 0 y bottom:345px vas aumentando o disminuyendo según lo veas en el vista previa :)
Mil Gracias Gema =D genial ya me saliooo =D
:: Estupendo!!!
Nota: solo los miembros de este blog pueden publicar comentarios.